<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<script>

  var xmlhttp;  //ajax对象
  try{
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  }catch (e){
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }catch (e){
      try {
        xmlhttp = new XMLHttpRequest();
      }catch (e){
        alert("您的浏览器不支持AJAX");
      }
    }
  }

  function  hello(){
    var url = "../HelloServlet?name=" + nm.value;
    //回调函数
    xmlhttp.onreadystatechange = function (){
      if(xmlhttp.readyState == 4 && xmlhttp.status ==200){

        console.info("xmlhttp.readyState = " + xmlhttp.readyState);
        console.info("xmlhttp.status" + xmlhttp.status);
        res.innerText = xmlhttp.responseText;

      }
    }
    //打开连接
    xmlhttp.open("get",url);
    //发送请求
    xmlhttp.send(null);
  }
</script>




<body>


<!--  127.0.0.1/工程名/ajax/demo.html  -->

<!--  127.0.0.1/工程名/HelloServlet  -->

<h1>表单提交</h1>
<form action="../HelloServlet">
  名字:<input name="name">
  <button>Hello</button>
</form>

<h1>AJAX提交</h1>
<form>
  名字:<input name="name" id="nm" value="">
  <!-- button 普通按钮，submit 提交按钮   reset   重置按钮 -->
  <button type="button" onclick="hello()">Hello</button>
</form>

<span id="res"></span>

</body>
</html>